<template>
  <div class="inn">

    <div class="inn_top">
      <div class="inn_top_left">
        <Skill></Skill>
      </div>
      <div class="inn_top_right">
        <Exploit></Exploit>
      </div>
    </div>

    <div class="inn_bottom">
      <div class="inn_bottom_left">
        <Expand></Expand>
      </div>
      <div class="inn_bottom_right" id="innBottomRight">
        <Title class="inn_blogs_title" :title="technology"></Title>
        <div class="inn_blogs">
          <div class="inn_blogs_item_box"
               v-for="(item,i) in blogList"
               :key="i"
          >
            <a href="" class="inn_blogs_item">
              <img :src="$baseImg + item.cover" alt="">
              <div class="inn_blogs_item_title">
                <p>{{item.title}}</p>
                <span>{{item.describe}}</span>
<!--                <span>进入项目文件夹下的目文件夹下的的213进入项目文件夹下的的文件夹下的的进入项目文件夹下的的进入项目文件夹下的...</span>-->
              </div>
            </a>
          </div>


        </div>
      </div>
    </div>

  </div>
</template>

<script>
import Title from "@/components/title.vue";
import Skill from './skill.vue'
import Expand from './expand.vue'
import Exploit from './exploit.vue'
export default {
  components: {
    Title,
    Skill,
    Expand,
    Exploit,
  },

  data(){
    return {
      technology:'个人博客',
      blogList:[],
    }
  },
  methods:{

    getBlogList() {
      // 获取用户信息
      this.$axios.getBlogList().then(res => {
        this.blogList = res.data
      })
    }

  },
  mounted() {
    this.changeStyle(1)
    this.getBlogList()
  }
}

</script>

<style scoped lang="less">
.inn{
  display: flex;
  justify-content: space-between;
  height: 100%;
  flex-direction: column;

  .inn_top{
    height: 46vh;
    display: flex;
    justify-content: space-between;

    .inn_top_left{
      width: 65%;
      height: 46.263vh;
      border-radius: 2.083vw;
      background: #fff;
      position: relative;
    }

    .inn_top_right{
      width: 32%;
      height: 46.263vh;
      border-radius: 2.083vw;
      background: #fff;
      position: relative;
    }
  }

  .inn_bottom{
    height: 40vh;
    display: flex;
    justify-content: space-between;

    .inn_bottom_left{
      width: 30%;
      height: 100%;
      border-radius: 2.083vw;
      background: #fff;
      position: relative;
    }

    .inn_bottom_right{
      width: 67%;
      height: 100%;
      border-radius: 2.083vw;
      background: #fff;
      overflow: hidden;
      display: flex;
      flex-direction: column;

      .inn_blogs_title{
        font-size: 1.046vw;
        color: #3d5654;
        font-weight: 700;
        margin-bottom: 2vh;
      }
      .inn_blogs::-webkit-scrollbar{
        width: 0;
      }
      .inn_blogs{
        padding-top: 1.5vh;
        flex: 1;
        overflow: hidden;
        overflow-y: scroll;

        .inn_blogs_item:before,.inn_blogs_item:after{
          content: "";
          width: 1.302vw;
          height: 1.302vw;
          display: block;
          position: absolute;
          top: 0;
          background: #e6f1f0;
          border-radius: 50%;
        }

        .inn_blogs_item:before{
          right: 0;
          transform: translate(50%,-50%);
        }

        .inn_blogs_item:after{
          left: 0;
          transform: translate(-50%,-50%);
        }

        .inn_blogs_item_box{
          height: 16.5vh;
        }

        .inn_blogs_item{
          display: flex;
          color: #555;
          padding: 0 2.604vw;
          height: 100%;
          align-items: center;
          border-top: 0.0977vw dashed #e1eceb;
          position: relative;

          img{
            display: block;
            width: 3.125vw;
            height: 3.125vw;
            margin-right: 1.25vw;
            border-radius: 50%;
          }

          .inn_blogs_item_title{
            display: flex;
            flex-direction: column;
            justify-content: center;
             p{
               font-size: .9375vw;
               color: #555;
               margin-bottom: 0.45vw;
             }
            span{
              font-size: .833vw;
              line-height: 1.542vw;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
        }
      }
    }
  }
}
</style>